<script setup>
import { onMounted, ref } from 'vue';
const props = defineProps(['drawer'])
const userInfo = JSON.parse(localStorage.getItem("ZAYY_USER_INFO"))
// const menuInfo = JSON.parse(localStorage.getItem("ZAYY_MENU_INFO"))
const menuInfo = []

const systemMenuList = ref([
    {
        icon: "",
        menu_name: "特殊人员库",
        path: '/users'
    },
    {
        icon: "",
        menu_name: "用户管理",
        path: '/role'
    },
]);
const gridMenuList = ref([]);
const fireMenuList = ref([]);
const warningMenuList = ref([]);
const opinionList = ref([]);
const windowList = ref([]);

onMounted(() => {
    // menuInfo.forEach(item => {
    //     if(item.parent_id == 0) {
    //         systemMenuList.value.push(item)
    //     }
    //     if(item.parent_id == 1) {
    //         gridMenuList.value.push(item)
    //     }
    //     if(item.parent_id == 2) {
    //         fireMenuList.value.push(item)
    //     }
    //     if(item.parent_id == 3) {
    //         warningMenuList.value.push(item)
    //     }
    //     if(item.parent_id == 4) {
    //         opinionList.value.push(item)
    //     }
    //     if(item.parent_id == 6) {
    //         windowList.value.push(item)
    //     }
    // })
})

</script>

<template>
    <v-navigation-drawer color="#1B1D29" :permanent="true" v-model="props.drawer">
        <v-list color="primary" :nav="true" >
            <v-list>
                <v-list-item
                    :prepend-avatar="userInfo.avatar ? userInfo.avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
                    :title="userInfo.nickname"
                    :subtitle="userInfo.phonenumber"
                >
                </v-list-item>
            </v-list>

            <v-divider></v-divider>
            <v-list-item title="首页" prepend-icon="mdi-home" to="/home"></v-list-item>

            <v-list-group value="系统管理">
                <template v-slot:activator="{ props }">
                    <v-list-item v-bind="props" prepend-icon="mdi-cog" title="系统管理"></v-list-item>          
                </template>
                <v-list-item v-for="item in systemMenuList" :prepend-icon="item.icon" :title="item.menu_name" :to="item.path"></v-list-item>
            </v-list-group>

            <!-- <v-list-group value="网格化巡检">
                <template v-slot:activator="{ props }">
                    <v-list-item v-bind="props" prepend-icon="mdi-grid" title="网格化巡检"></v-list-item>
                </template>
                <v-list-item v-for="item in gridMenuList" :prepend-icon="item.icon" :title="item.menu_name" :to="item.path"></v-list-item>
                <v-list-item prepend-icon="mdi-account-plus" title="拜访人信息" to="/visit"></v-list-item> 
            </v-list-group>

            <v-list-group value="消防巡检">
                <template v-slot:activator="{ props }">
                    <v-list-item v-bind="props" prepend-icon="mdi-fire-extinguisher" title="消防巡检"></v-list-item>
                </template>
                <v-list-item v-for="item in fireMenuList" :prepend-icon="item.icon" :title="item.menu_name" :to="item.path"></v-list-item>
            </v-list-group>

            <v-list-group value="窗户巡检">
                <template v-slot:activator="{ props }">
                    <v-list-item v-bind="props" prepend-icon="mdi-dock-window" title="窗户巡检"></v-list-item>
                </template>
                <v-list-item v-for="item in windowList" :prepend-icon="item.icon" :title="item.menu_name" :to="item.path"></v-list-item>
            </v-list-group>

            <v-list-group value="其他报警">
                <template v-slot:activator="{ props }">
                    <v-list-item v-bind="props" prepend-icon="mdi-bell-alert" title="其他报警"></v-list-item>
                </template>
                <v-list-item v-for="item in warningMenuList" :prepend-icon="item.icon" :title="item.menu_name" :to="item.path"></v-list-item>
            </v-list-group>

            <v-list-group value="舆情管理">
                <template v-slot:activator="{ props }">
                    <v-list-item v-bind="props" prepend-icon="mdi-newspaper" title="舆情管理"></v-list-item>
                </template>
                <v-list-item v-for="item in opinionList" :prepend-icon="item.icon" :title="item.menu_name" :to="item.path"></v-list-item>
            </v-list-group> -->

        </v-list>
    </v-navigation-drawer>
    <v-main :scrollable="true">
        <router-view></router-view>
    </v-main>
</template>

<style scoped lang="scss">

</style>
